<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue的计算属性与侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<!-- 计算属性与侦听器 -->
	<div id='custom'>
		姓：<input v-model="firstName"/>
		名：<input v-model="lastName"/>
		<div>{{fullName}}</div>
		<div>{{count}}</div>
		<!-- v-if 使用时会删除，创建在dom树中的标签，但是v-show只是使用display进行了隐藏 -->
		<!-- <div v-if="show">hello,word</div> -->
		<div v-show="show">hello,word</div>
		<button @click="handleClick">toggle</button>

		<!-- v-for循环展示 加key值提升渲染性能，但是key不同 -->
		<ul>
			<li v-for="(item,index) of list":key="index">{{item}}</li>
		</ul>

	</div>
	<script>
		new Vue({
			el: "#custom",
			data: {
				firstName: "",
				lastName: '',
				count: 0,
				show: true,
				list: [1,2,3,4,5],

			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}

			},
			// 计算属性
			computed: {
				fullName: function(){
					return this.firstName +' '+this.lastName
				}
			},
			//侦听
			watch: {
				 // firstName:function(){
				 // 	this.count ++
				 // },
				 // lastName:function(){
				 // 	this.count ++
				 // },
				 fullName: function(){
				 	this.count ++
				 }
			}

		})
	</script>

</body>
</html>